<template>
	<view class="container">
		<!-- 	<image class="w-100" src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/Bg/bg5.jpg"
			mode="heightFix" style="height: 40vh;"></image> -->
		<video src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/Bg/gotea.mp4" autoplay object-fit
			muted :show-fullscreen-btn="showFullBtn" :show-play-btn="showPlayBtn" :show-progress="false" loop="true"
			style="width: 100%;height: 28.8vh;"
			poster="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/Swipers2/1.jpg"
			class="w-100"></video>
		<view class="content">
			<!-- <view class="welcome" @tap="openLoginPopup">
				<view>你好 {{ isLogin ? userInfo.nickName : '立即登录开启喜茶星球之旅' }}</view>
				<view class="font-size-base">灵感之茶，中国制造</view>
			</view> -->
			<!-- member card begin -->
			<view class="member-card">
				<view class="info">
					<!-- <view class="title">
						<view class="wenyue-font" @tap="openBenefits">欢迎来HT</view> -->
					<!-- <view class="tips" @tap="openMember">
							<view>成为Happy会员享双倍积分</view>
							<image src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/icon_arrow.png"></image>
						</view> -->
					<!-- </view> -->

					<!-- <view style="display: flex;align-items: center;justify-content: center;">
						<view style="margin:0 0 20rpx 0;background: linear-gradient(to right, #aa00ff,#ffaa00, #a6f8ff);border-radius: 100%;display: inline-block;display: flex;justify-content: center;align-items: center;padding:20rpx 60rpx;">
							<text class="wenyue-font" style="font-size: 45rpx;" v-if="!isLogin"
								@click="gotologin">登录</text>
							<text class="wenyue-font" style="font-size: 45rpx;" v-if="isLogin"
								@click="gotoxiadan">欢迎来HT~</text>
						</view>
					</view> -->

					<!-- @tap="info" 修改头像信息 -->

					<view class="experience-card">
						<view class="d-flex">
							<view class="badage" v-if="Tasks.level !==undefined">
								Lv{{Tasks.level}}
							</view>
							<view v-else>

							</view>
							<image
								src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/common/icon_about.png"
								class="about-icon"></image>
						</view>
						<view style="position: absolute;right: 0;top: 0;">
							<view
								style="opacity: 0.6; margin:0 0 20rpx 0;background: linear-gradient(to right, #bbb8ff,#fff7c5, #cefbff);border-radius: 100%;display: inline-block;display: flex;justify-content: center;align-items: center;padding:20rpx">
								<text class="wenyue-font" style="font-size: 45rpx;" v-if="!isLogin"
									@click="gotologin">登录</text>
								<text class="wenyue-font" style="font-size: 45rpx;" v-if="isLogin"
									@click="gotoxiadan">欢迎</text>
							</view>
						</view>
						<view>
							<view class="font-size-base" v-if="Tasks.levelProgress !==undefined">当前HT经验值:
								{{Tasks.levelProgress}}/100
							</view>
							<view class="font-size-base" v-else>
								当前HT经验值:
							</view>
							<view class="process-box">
								<progress :percent="Tasks.levelProgress/100*100" border-radius="4px" :stroke-width="4"
									activeColor="#e29700" backgroundColor="#D0D0D0" active="true" />
							</view>
						</view>
					</view>
				</view>
				<!-- <view @click="updateUserProfile">
					<image :src="userInfo.avatarUrl" mode="widthFix" style="width: 100px;height: 100px;"></image>
					
				</view> -->
				<view class="row">
					<navigator class="grid" open-type="navigate" url="/pages/integrals/mall">
						<image
							src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/me_icon_points.png">
						</image>
						<view class="value">{{scores}}</view>
						<view class="title">积分商城</view>
					</navigator>
					<navigator class="grid" open-type="navigate" url="/pages/my/coupon">
						<image src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/me_icon_quan.png">
						</image>
						<view class="value">{{coupons.length}}</view>
						<view class="title">优惠劵</view>
					</navigator>
					<navigator class="grid" open-type="navigate" url="/pages/my/wallet">
						<image
							src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/me_icon_wallet.png">
						</image>
						<view class="value">0.00</view>
						<view class="title">钱包</view>
					</navigator>
					<navigator class="grid" open-type="navigate" url="/pages/gifts/gifts">
						<image
							src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/me_icon_gift_card.png">
						</image>
						<view class="value">0</view>
						<view class="title">精美礼品</view>
					</navigator>
				</view>
			</view>

			<!-- member card end -->
			<!-- 星球播报 begin -->
			<view class="xinqiubobao">
				<!-- <view class="title">星球播报</view> -->
				<swiper class="swiper" next-margin="50px" autoplay :interval="5000" :duration="500" circular>
					<swiper-item class="swiper-item" v-for="(item, index) in boardcast" :key="index">
						<view class="swiper-item-wrapper">
							<image :src="item.coverPic" class="img"></image>
							<view class="desc">
								<view class="title">{{ item.title }}</view>
								<view class="subtitle">{{ item.subtitle }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 星球播报 end -->
			<!-- 任务中心 begin -->
			<view class="task-center" @tap="taskCenter">
				<view class="intro">
					<view class="title">任务中心</view>
					<view class="subtitle">MISSION CENTER</view>
				</view>
				<view class="image-wrapper">
					<image src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/background1.png">
					</image>
				</view>
			</view>
			<!-- 任务中心 end -->
		</view>
		<!-- 开通礼包 begin -->
		<!-- <view class="open-gift">
			<view class="header">
				<view class="title">开通礼包</view>
				<view class="subtitle" @tap="openMember">更多</view>
			</view>
			<view class="row">
				<view class="grid" @tap="openMember">
					<image
						src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/member_benefits/me_rights_icon_free.png">
					</image>
					<view class="title">
						<view>星球赠饮券</view>
						<view class="number">x1</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image
						src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/member_benefits/me_rights_icon_1jia1.png">
					</image>
					<view class="title">
						<view>满15减5券</view>
						<view class="number">x1</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image
						src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/member_benefits/me_rights_icon_2jia1.png">
					</image>
					<view class="title">
						<view>买二赠一券</view>
						<view class="number">x2</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image
						src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/member_benefits/me_rights_icon_qingshi.png">
					</image>
					<view class="title">
						<view>轻食券</view>
						<view class="number">x2</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image
						src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/member_benefits/me_rights_icon_youxian_new.png">
					</image>
					<view class="title">
						<view>优先券</view>
						<view class="number">x2</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image
						src="https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/my/member_benefits/me_rights_icon_waimai_new.png">
					</image>
					<view class="title">
						<view>免运费券</view>
						<view class="number">x2</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 开通礼包 end -->

		<!-- <list-cell hover arrow @click="myCode">
			<view class="list-cell-wrapper">
				<view view="title">会员码</view>
				<view class="subtitle">门店扫码积分、喜茶钱包和阿喜有礼卡支持</view>
			</view>
		</list-cell> -->
		<list-cell hover arrow>
			<view class="list-cell-wrapper">
				<view view="title">兑换中心</view>
				<view class="subtitle">兑换丰富的优惠券,礼品卡</view>
			</view>
		</list-cell>
		<!-- <list-cell hover arrow>
			<view class="list-cell-wrapper">
				<view view="title">星球封面</view>
			</view>
		</list-cell> -->
		<list-cell hover arrow>
			<view class="list-cell-wrapper">
				<view view="title">联系客服</view>
			</view>
		</list-cell>
		<list-cell hover arrow>
			<view class="list-cell-wrapper">
				<view view="title">消息中心</view>
			</view>
		</list-cell>
		<list-cell hover arrow last>
			<view class="list-cell-wrapper">
				<view view="title">更多</view>
			</view>
		</list-cell>
		<!-- 登录popup -->
		<login-popup ref="loginPopup" @userInfoObtained="handleUserInfo" @loginSuccess="updateScores"></login-popup>
	</view>
</template>

<script>
	import cloudApi from '@/common/cloudApi.js'
	import listCell from '@/components/list-cell/list-cell.vue'
	import loginPopup from './components/login-popup.vue'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			listCell,
			loginPopup
		},
		data() {
			return {
				showPlayBtn: false, //是否显示video控制条播放按钮
				showFullBtn: false, //是否显示video控制条全屏按钮
				boardcast: [],
				users: {},
				scores: 0,
				Tasks: [],
				coupons: []
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo'])
		},
		async onLoad(options) {
			uniCloud.callFunction({
				name: "boardcast",
				data: {}
			}).then(res => {
				this.boardcast = res.result.data;
			})
			this.openLoginPopup();
		},
		// onLoad() {
		// uniCloud.callFunction({
		// 	name: "CloudDemo",
		// 	data:{}
		// }).then(res=>{
		// 	console.log(res.result.res.data);
		// 	console.log(res.result.res2.data);
		// })
		// },
		onShow() {
			this.showCoupon();
			this.updateScores();
		},
		methods: {
			showCoupon() {
				if (this.isLogin) {
					this.coupons = this.userInfo.coupon[0].list;
					this.scores = this.userInfo.scores;
					this.Tasks = this.userInfo;
					console.log(this.coupons.length);
				} else {
					return
				}
			},
			updateScores() {
				if (this.isLogin) {
					cloudApi.call({
						name: "users",
						data: {
							userId: this.userInfo.userId
						},
						success: (res) => {
							this.scores = res.result[0].score
							this.coupons = this.userInfo.coupon[0].list;
							console.log(this.coupons.length);
							this.Tasks = res.result[0];
						}
					});
				} else {
					return
				}
			},
			gotologin() {
				this.openLoginPopup();
			},
			gotoxiadan() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// updateUserProfile() {
			// 	uni.getUserProfile({
			// 		desc: "用户请登录",
			// 		success: (res) => {
			// 			console.log(res);
			// 			this.userInfo = Object.assign(this.userInfo, res.userInfo);
			// 			cloudApi.call({
			// 				name: "updateuserinfo",
			// 				data: {
			// 					userInfo: this.userInfo
			// 				}
			// 			})
			// 		},
			// 		fail: (err) => {
			// 			if (err.errMsg === 'getUserProfile:fail auth deny') return uni.showToast({
			// 					title: '您取消了授权',
			// 					duration: 2000
			// 				});
			// 		}
			// 	})
			// },
			handleUserInfo(userInfo) {
				this.users = userInfo;
			},
			openLoginPopup() {
				if (this.isLogin) {
					return
				}
				this.$refs['loginPopup'].open()
			},
			info() {
				uni.navigateTo({
					url: '/pages/my/info'
				})
			},
			taskCenter() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/task-center/task-center'
					})
				} else {
					uni.showModal({
						title: '登录提示',
						content: '请先登录即可查看任务。'
					});
				}
			},
			// openMember() {
			// 	uni.navigateTo({
			// 		url: '/pages/my/member'
			// 	})
			// },
			// myCode() {
			// 	uni.navigateTo({
			// 		url: '/pages/my/code'
			// 	})
			// },
			openBenefits() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/my/benefits'
					})
				} else {
					this.$refs['loginPopup'].open()
				}
			}
		}
	}
</script>
<style>
	.experience-card {
		position: relative;
		width: 100%;
		height: 270rpx;
		background-color: #ffffff;
		background: url('https://static.heytea.com/taro_trial/v1/img/my/member_benefits/me_rights_img_go.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: $border-radius-lg;
		box-shadow: 0 0 20rpx 0 rgba($color: $border-color, $alpha: 0.4);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.level {
		font-size: 40rpx;
		font-family: 'neutra';
		margin-right: 10rpx;
	}

	.process-box {
		margin-top: 10rpx;
		width: 50%;
	}

	.about-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.badage {
		font-family: 'neutra';
		background: linear-gradient(to right, #aaaaff, #a6f8ff);
		border: 2rpx solid $text-color-base;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		font-weight: bold;
		font-size: 40rpx;
		/* width: 80rpx; */
		margin: 10rpx 0;
	}
</style>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */

	.content {
		// padding: 0 30rpx;

	}

	.welcome {
		position: relative;
		margin-top: -136rpx;
		display: flex;
		flex-direction: column;
		font-size: $font-size-lg;
		color: $text-color-warning;
	}

	.member-card {
		background-color: #dfdfdf;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		border-radius: $border-radius-base;
		margin-bottom: 40rpx;

		.info {
			border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.3);

			.title {
				flex: 1;
				font-size: 40rpx;
				color: $text-color-base;
				font-weight: 600;
				display: flex;
				align-items: center;

				.tips {
					margin-left: 10rpx;
					font-size: $font-size-sm;
					color: $text-color-assist;
					background-color: #e9e9e9;
					padding: 10rpx 30rpx;
					border-radius: 50rem !important;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}


		}

		.row {
			margin-top: $spacing-row-base;
			width: 100%;
			display: flex;
			align-items: center;
			background: url('https://mp-cc85421a-533b-4b68-b797-f0a3eba335d0.cdn.bspapp.com/Bg/bg9.jpg');
			background-size: cover;
			border-radius: 20rpx;

			.grid {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.value {
					font-family: 'neutra';
					color: #adc7ad;
					font-weight: 900;
					margin-bottom: $spacing-col-sm;
					font-size: $font-size-lg;
				}

				.title {
					font-size: $font-size-sm;
					letter-spacing: 2rpx;
					font-weight: 900;
					color: #3f3f3f;
				}
			}
		}
	}

	.xinqiubobao {
		width: 100%;
		position: relative;
		padding-left: 30rpx;

		.title {
			margin: 10rpx 0;
			font-size: $font-size-lg;
			font-weight: 500;
		}

		.swiper {
			height: 200rpx;
			margin-bottom: 10rpx;

			.swiper-item {

				.swiper-item-wrapper {
					display: flex;
					background: linear-gradient(to right, #ffe298, #ffdcfc);
					padding: 40rpx 60rpx;
					border-radius: 25rpx;
					align-items: center;
					margin-right: 40rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
						margin-right: 20rpx;
					}

					.desc {
						display: flex;
						flex-direction: column;

						.title {
							font-size: $font-size-medium;
							font-weight: 500;
							margin-bottom: 10rpx;
						}

						.desc {
							font-size: $font-size-sm;
							color: $text-color-grey;
						}
					}
				}
			}
		}
	}

	.task-center {
		margin: 40rpx 30rpx 40rpx 30rpx;
		background: linear-gradient(to right, #ffcaa6, #dde1ff);
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		border-radius: 25rpx;

		.intro {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.title {
				font-size: $font-size-lg;
				color: $text-color-base;
			}

			.subtitle {
				font-family: 'neutra';
				font-size: $font-size-sm;
			}
		}

		.image-wrapper {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;


			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.open-gift {
		width: 100%;
		background-color: $bg-color-white;
		padding: 30rpx 40rpx;
		margin-bottom: 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: $font-size-lg;
				font-weight: 500;
			}

			.subtitle {
				font-size: $font-size-base;
				color: $text-color-grey;
			}
		}

		.row {
			display: flex;
			flex-wrap: wrap;

			.grid {
				width: 33.3333%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: $spacing-row-base;
				}

				.title {
					font-size: $font-size-base;
					color: $text-color-base;
					display: flex;
					align-items: baseline;

					.number {
						margin-left: 5rpx;
						font-family: 'neutra';
						color: $color-warning;
					}
				}
			}
		}
	}

	.list-cell-wrapper {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: $font-size-lg;
		}

		.subtitle {
			font-size: $font-size-sm;
			color: $text-color-assist;
		}
	}
</style>